<template>
  <div>
    <div class="breadcrumb_wrap">
      <span class="current">当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/personalcenter' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>消息中心</el-breadcrumb-item>
        <el-breadcrumb-item>个人消息</el-breadcrumb-item>
        <el-breadcrumb-item>评论</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button
        style="position: absolute; right: 10px; top: 5px"
        type="primary"
        plain
        size="small"
        @click="toDoctorCertify"
        >医生认证</el-button
      >
    </div>

    <div class="msg_list">
      <div class="msg_item">
        <div class="user_line">
          <el-avatar
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          ></el-avatar>
          <span class="user_name">Amy Li</span>
          <span class="date">2021-09-18 18:00</span>
        </div>
        <div class="msg_content">
          <span>XXX</span>
          <span style="margin-left: 5px">回复了你</span>
          <router-link style="margin-left: 25px; color: #25b6a0":to="{ name: 'article' }">
            上呼吸道感染会引起发烧吗
          </router-link>
        </div>
      </div>
      <div class="msg_item">
        <div class="user_line">
          <el-avatar
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          ></el-avatar>
          <span class="user_name">Amy Li</span>
          <span class="date">2021-09-18 18:00</span>
        </div>
        <div class="msg_content">
          <span>XXX</span>
          <span style="margin-left: 5px">回复了你</span>
          <router-link style="margin-left: 25px; color: #25b6a0":to="{ name: 'article' }">
            上呼吸道感染会引起发烧吗
          </router-link>
        </div>
      </div>
      <div class="msg_item">
        <div class="user_line">
          <el-avatar
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          ></el-avatar>
          <span class="user_name">Amy Li</span>
          <span class="date">2021-09-18 18:00</span>
        </div>
        <div class="msg_content">
          <span>XXX</span>
          <span style="margin-left: 5px">回复了你</span>
          <router-link style="margin-left: 25px; color: #25b6a0":to="{ name: 'article' }">
            上呼吸道感染会引起发烧吗
          </router-link>
        </div>
      </div>
      <div class="msg_item">
        <div class="user_line">
          <el-avatar
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          ></el-avatar>
          <span class="user_name">Amy Li</span>
          <span class="date">2021-09-18 18:00</span>
        </div>
        <div class="msg_content">
          <span>XXX</span>
          <span style="margin-left: 5px">回复了你</span>
          <router-link style="margin-left: 25px; color: #25b6a0" :to="{ name: 'article' }">
            上呼吸道感染会引起发烧吗
          </router-link>
        </div>
      </div>
      <div class="msg_item">
        <div class="user_line">
          <el-avatar
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          ></el-avatar>
          <span class="user_name">Amy Li</span>
          <span class="date">2021-09-18 18:00</span>
        </div>
        <div class="msg_content">
          <span>XXX</span>
          <span style="margin-left: 5px">回复了你</span>
          <router-link style="margin-left: 25px; color: #25b6a0":to="{ name: 'article' }">
            上呼吸道感染会引起发烧吗
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "message",
  data() {
    return {
      tabsActive: "user",
      logo: require("@/assets/images/logo.jpg"),
    };
  },
  // watch: {
  //   $route: {
  //     handler() {
  //       this.tabsActive = this.$route.query.tab;
  //     },
  //     deep: true,
  //   },
  // },
  methods: {
    //跳转到医生认证
    toDoctorCertify() {
      this.$router.push("/doctorCertify");
    },
  },
};
</script>

<style lang="scss" scoped>
.breadcrumb_wrap {
  width: 100%;
  height: 40px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: 10px;
  box-sizing: border-box;
  .current {
    font-size: 14px;
  }
}
.msg_list {
  margin-top: 20px;
  .msg_item {
    background-color: #fff;
    width: 100%;
    padding: 10px;
    box-sizing: border-box; //!!!
    border-bottom: 1px solid #eee;
    &:last-child {
      border-bottom: 0;
    }
    .user_line {
      display: flex;
      align-items: center;
      .user_name {
        color: #666;
        font-size: 16px;
        margin-left: 10px;
      }
      .date {
        color: #aaa;
        font-size: 14px;
        margin-left: 14px;
      }
    }
    .msg_content {
      color: #666;
      font-size: 14px;
      text-align: left;
      line-height: 30px;
      margin-left: 10px;
    }
  }
}
</style>
